import React, { useState } from "react";
import "./TodoMain.css";

export default function TodoMain(props) {
  let { todo, updatatodo, deltodo } = props;
  let [id, setId] = useState("");

  //  获取当前任务的完成状态
  let getdone = (id) => {
    return () => {
      updatatodo(id);
    };
  };

  // 显示删除按钮
  let showbtn = (id) => {
    return () => {
      setId(id);
    };
  };
  // 移出ul 时 将所有的删除按钮隐藏
  let unshow = () => {
    setId("");
  };

  //  删除功能
  let deldata = (id) => {
    //获取需要删除的id
    return () => {
      deltodo(id);
    };
  };
  return (
    <>
      <ul className="todo-main" onMouseOut={unshow}>
        {todo.map((item, index) => {
          return (
            <li key={item.id} onMouseMove={showbtn(index)}>
              <label>
                <input
                  type="checkbox"
                  checked={item.done}
                  onChange={getdone(item.id)}
                />
                <span>{item.title}</span>
              </label>
              <button
                className="btn btn-danger"
                style={
                  index === id ? { display: "block" } : { display: "none" }
                }
                onClick={deldata(item.id)}
              >
                删除
              </button>
            </li>
          );
        })}
        {/* 当todo 有数据时候  展示todo 中的数据  如果没有 就展示没有内容的li标签 */}
        {todo.length > 0 ? "" : <li className="todo-empty"> 暂无内容</li>}
      </ul>
    </>
  );
}
